<template>
	<MescrollUni top="1" :down="downOption" @down="downCallback"
	 :up="upOption" @up="upCallback" class="scroll-box">
		<view class="detail-box" v-for="(item,index) in dataList" :key="index" @click="goDetail(item)">
			<view class="detail-info">
				<view class="time">{{item.create_time}}</view>
				<rich-text :nodes="item.description" class="detail-content"></rich-text>
			</view>
			<text class="coin-value" :class="{green:item.isGreen}">{{item.operation_number}}</text>
		</view>
	</MescrollUni>
</template>

<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				dataList:[],
				downOption: {
					autoShowLoading:true,
					use: true
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true,
					onScroll: true,
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				}
			};
		},
		methods:{
			isGreen(val){
				return 
			},
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			goDetail(item){
				uni.navigateTo({
					url:`/pages/wish/detail?group_id=${item.group_id}`
				})
			},
			upCallback(mescroll) {
				let page = mescroll.num // 页码, 默认从1开始
				let pageSize = mescroll.size // 页长, 默认每页10条
				this.$api.getAccountDetail({page,page_size:pageSize},{loading:false}).then(
					res=>{
						if(mescroll.num == 1) this.dataList = []; //如果是第一页需手动置空列表
						res.data.forEach(item=>{
							item.isGreen=item.operation_number<0
						})
						this.dataList = this.dataList.concat(res.data)
						mescroll.endByPage(res.data.length,res.last_page)
					},
					()=>{
						mescroll.endErr()
					}
				)
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fff;
	border-top:1rpx solid #F0F0F0;
}
.detail-box{
	display: flex;
	align-items: center;
	padding: 30rpx 36rpx;
	border-bottom: 1rpx solid #E2E9ED;
}
.detail-info{
	flex:1;
	margin-right: 30rpx;
}
.time{
	margin-bottom: 16rpx;
	font-size: 26rpx;
	color:#666;
}
.detail-content{
	font-size: 30rpx;
	color:#333;
}
.coin-value{
	display: flex;
	align-items: center;
	font-size: 36rpx;
	color:#E7404A;
	&.green{
		color:#4CD964;
	}
	.iconfont{
		font-size: 36rpx;
		margin-left: 5rpx;
	}
}
</style>
